<template>
    <div class="upload-list-content">
        <div v-loading="loading">
          <template v-if="showUpload">
            <el-upload
                ref="files"
                v-if="showUploadButton"
                class="upload-button"
                :multiple="multiple"
                :action="uploadImgUrl"
                :on-success="uploadSuccess"
                :before-upload="beforeAvatarUpload"
                :on-progress="handleUploadProgress"
                :on-error="handleUploadError"
                :show-file-list="false"
                :headers="headers"
            >
                <el-button plain>点击上传</el-button>
            </el-upload>
            <el-upload
                ref="files"
                v-else
                :style="cssStyle"
                class="upload-long"
                drag
                :multiple="multiple"
                :action="uploadImgUrl"
                :data="data"
                :accept="acceptType"
                :on-success="uploadSuccess"
                :before-upload="beforeAvatarUpload"
                :on-progress="handleUploadProgress"
                :on-error="handleUploadError"
                :show-file-list="false"
                :headers="headers"
                :name="paramsName"
            >
                <i
                    class="el-icon-upload"
                    style="color: #bbb; font-size: 18px"
                ></i>
                <span class="el-upload__text">
                    <el-button type="text">点击上传</el-button></span
                >
            </el-upload>
          </template>
          <div class="upload-text" v-if="showUndoExplain">
              <div class="title">上传须知：</div>
              <ul>
                  <!-- <li>1、单次上传请选择100MB以内的文件进行上传；</li> -->
                  <li>1、支持下列文件格式：{{ acceptType }}
                    <span style="margin-left: 10px;">(禁止上传、存储涉密文件)</span>
                  </li>
                  <li>
                      2、一个章/节下最多只存在一个视频文件和一个课件，上传新的视频需要先删除已有视频或课件
                  </li>
              </ul>
          </div>
        </div>
        <!-- <div
            class="card-box"
            v-if="
                showFileList &&
                (beforeFileList.length > 0 || fileList.length > 0)
            "
        >
            <h2>导入预览</h2>
            <el-table
                :data="fileList"
                v-loading="loading"
                border
                size="medium"
                class="table"
            >
                <el-table-column label="序号" align="center" width="60">
                    <template slot-scope="scope">
                        <span>{{ scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="fileName"
                    sortable="custom"
                    label="文件名称"
                >
                    <template slot-scope="scope">
                        <el-link
                            type="primary"
                            :underline="false"
                            @click="edit(scope.row.id)"
                            >{{ scope.row.fileName }}</el-link
                        >
                    </template>
                </el-table-column>
                <el-table-column prop="fileCode" label="文件编号">
                </el-table-column>
                <el-table-column prop="fileVersion" label="文件版次">
                </el-table-column>
                <el-table-column
                    prop="versionStatus"
                    sortable="custom"
                    label="版次状态"
                >
                    <template slot-scope="scope">
                        <span>{{
                            scope.row.versionStatus === 0 ? "废止" : "现行"
                        }}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="author" label="作者姓名">
                </el-table-column>
                <el-table-column prop="uploadUser" label="上传人员">
                </el-table-column>
                <el-table-column prop="uploadTime" label="上传日期">
                </el-table-column>

                <el-table-column prop="fileTypeName" label="文件类型">
                </el-table-column>
                <el-table-column prop="professionName" label="所属专业">
                </el-table-column>
                <el-table-column prop="fileFormat" label="文件格式">
                </el-table-column>

                <el-table-column prop="statusName" label="文件状态">
                </el-table-column>
                <el-table-column
                    fixed="right"
                    header-align="center"
                    align="center"
                    width="80"
                    label="操作"
                >
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            @click="handleUploadRemove(scope.row)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="uploadStatusName" label="状态识别">
                </el-table-column>
                <el-table-column prop="uploadMessage" label="异常提示">
                </el-table-column>
            </el-table>
        </div> -->
        <!--视频预览-->
        <div class="video-play" v-if="videoFlag">
            <div class="video-close" @click="closeVideo">
                <i class="el-icon-circle-close" style="font-size: 40px"></i>
            </div>
            <template v-if="listVideoUrl.length > 1">
                <div class="video-prev" @click="videoPrev">
                    <i class="el-icon-arrow-left"></i>
                </div>
                <div class="video-next" @click="videoNext">
                    <i class="el-icon-arrow-right"></i>
                </div>
            </template>
            <video
                class="video"
                controls
                height="80%"
                width="70%"
                :src="getFileUrl(videoUrl)"
            ></video>
        </div>
        <!--附件预览-->
        <el-dialog
            :visible.sync="previewFlag"
            :append-to-body="true"
            :close-on-click-modal="false"
            :showClose="false"
            width="70%"
        >
            <div
                class="dialogHeader"
                slot="title"
                style="
                    text-align: center;
                    font-size: 18px;
                    font-weight: 400;
                    height: 28px;
                "
            >
                {{ previewName }}
                <span
                    style="
                        position: absolute;
                        right: 20px;
                        top: 18px;
                        cursor: pointer;
                    "
                    @click="previewFlag = false"
                    ><i
                        class="el-icon-error"
                        style="font-size: 20px; vertical-align: middle"
                    ></i
                ></span>
            </div>
            <div>
                <iframe
                    align="center"
                    width="100%"
                    height="100%"
                    :src="previewUrl"
                    frameborder="no"
                    border="0"
                    marginwidth="0"
                    marginheight="0"
                    scrolling="no"
                ></iframe>
            </div>
        </el-dialog>
        
        <!-- 线形进度条 -->
        <div v-if="progressVisible" class="linear-progress-container">
            <div class="linear-progress-info">
                <span class="linear-progress-filename">{{ progressFileName }}</span>
                <span class="linear-progress-percentage">{{ Math.round(progressPercentage) }}%</span>
            </div>
            <el-progress 
                :percentage="Math.round(progressPercentage)" 
                :stroke-width="6"
                :show-text="false"
                status="success"
            ></el-progress>
        </div>
    </div>
</template>
<script>
import { getToken } from '@/utils/auth'
export default {
  // name: 'PreviewUpload',
  data() {
    return {
      loading: false,
      beforeFileList: [],
      fileList: [],
      listImgUrl: [],
      listVideoUrl: [], // 视频预览数组
      videoFlag: false,
      videoUrl: '',
      previewFlag: false, // 文件预览弹框
      previewName: '', // 文件预览弹框标题
      previewUrl: '', // 文件预览地址
      lineWidth: '25%',
      checkList: [],
      // uploadImgUrl: process.env.VUE_APP_BASE_API + this.uploadUrl, // 上传的图片服务器地址
      uploadImgUrl: '',
      headers: {
        token: localStorage.getItem('token')
      },
      data: undefined,
      fileSize: 1,
      // 进度条相关
      progressVisible: false,
      progressPercentage: 0,
      progressFileName: '',
      progressTimer: null,
      currentUploadFile: null
    }
  },
  props: {
    delUrl: {
      type: String,
      default: () => {
        return '/event/transferrecord/transferRecord/deleteByAccessoryId'
      }
    },
    accessoryList: {
      type: Array,
      default: () => {
        return []
      }
    },
    acceptType: {
      type: String,
      default: () => {
        return '.doc,.docx,.ppt,.pdf,.xls,.xlsx'
      }
    },
    uploadUrl: {
      type: String,
      default: () => {
        return '/knowledgeFile/video/upload'
      }
    },
    videoType: {
      type: Number,
      default: () => {
        return 0
      }
    },
    paramsName: {
      type: String,
      default: () => {
        return 'files'
      }
    },
    // cssStyle样式示例
    /* cssStyle: {
            //单个卡片背景颜色及边框颜色
            fileCard: {
                borderColor: '#1c3f8c',
                background: '#1c3f8c'
            },
            //标题颜色
            titleName: {
                color: '#fff'
            },
            //时间,上传人,大小颜色
            info: {
                color: '#9b9b9b'
            },
            //按钮颜色
            btnColor: {
                color: '#fbb425'
            }
        }*/
    cssStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    showUndoExplain: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    // 是否显示上传者姓名
    showCreateName: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    // 是否显示删除按钮
    showDeleteButton: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    // 是否显示上传功能
    showUpload: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    // 是否显示上传按钮
    showUploadButton: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    // 是否显示预览按钮
    showPreviewButton: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    // 是否显示下载按钮
    showDownloadButton: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    // 是否显示文件类型
    showFileType: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    // 是否显示文件大小
    showFileSize: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    // 批量上传
    multiple: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    // 同时只能上传一个附件
    isOnly: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    // 是否可被选择
    isChecked: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  computed: {},
  created() {
    this.data = this.$route.query
  },
  mounted() {
    this.uploadImgUrl = this.$config.VUE_APP_BASE_API + this.uploadUrl
    console.log(this.uploadUrl, 'uplpad----')
  },
  watch: {
    accessoryList: {
      handler(accessoryList) {
        //   if (accessoryList.length > 0) {
        //     accessoryList.map((item) => {
        //       this.$set(item, 'icon', this.getAccessoryIcon(item.type))
        //       this.$set(item, 'checked', false)
        //     })
        //   }
        this.listImgUrl = []
        this.listVideoUrl = []
        this.fileList = accessoryList
        //   this.fileList.forEach((item) => {
        //     if (!item.accessoryId) {
        //       this.$set(item, 'accessoryId', item.id)
        //     }
        //     // this.$set(item, 'isNow', item.type === 'image' || item.type === 'video' ? false : true)
        //     if (item.type === 'image') {
        //       if (item.accessoryId) {
        //         this.listImgUrl.push(item.accessoryId)
        //       } else {
        //         this.listImgUrl.push(item.id)
        //       }
        //     } else if (item.type === 'video') {
        //       // 获取视频第一帧作为封面图
        //       if (!item.url) {
        //         if (item.accessoryId) {
        //           this.$set(item, 'url', this.getFileUrl(item.accessoryId))
        //         } else {
        //           this.$set(item, 'url', this.getFileUrl(item.id))
        //         }
        //         this.getVideoCover(item)
        //       }
        //       this.listVideoUrl.push(
        //         item.accessoryId ? item.accessoryId : item.id
        //       )
        //     }
        //   })
        // this.$emit('getValue', this.fileList)
        // this.$emit('getValue', accessoryList)
      },
      immediate: true,
      deep: false
    }
  },
  methods: {
    // importToTree() {
    //   this.$emit('getValue', this.fileList)
    //   this.fileList = []
    // },
    // 附件上传成功
    uploadSuccess(res, file, fileList) {
      this.loading = false
      // 停止进度条并显示成功
      this.stopFakeProgress(true)
      if (res.code === 200) {
        if (res.data.uploadStatus === 0) {
          this.fileList = []
          this.fileList.push({...res.data,videoType:this.videoType})
          console.log(this.fileList,'iiiiiiiiii')
          this.$emit('getValue', this.fileList)
          this.$message.success('导入成功!')
        } else {
          this.$message.warning(`${res.data.uploadMessage},不可导入!`)
        }
      }
      //   this.$set(
      //     res.accessory,
      //     'icon',
      //     this.getAccessoryIcon(res.accessory.type)
      //   )
      //   this.$set(res.accessory, 'accessoryId', res.accessory.id)
      //   this.$set(
      //     res.accessory,
      //     'isNow',
      //     !(res.accessory.type === 'image' || res.accessory.type === 'video')
      //   )
      //   this.fileList.push(res.accessory)
      //   if (res.accessory.type === 'image') {
      //     this.listImgUrl.push(res.accessory.id)
      //   } else if (res.accessory.type === 'video') {
      //     this.listVideoUrl.push(res.accessory.id)
      //     // 获取视频第一帧作为封面图
      //     this.$set(res.accessory, 'url', this.getFileUrl(res.accessory.id))
      //     this.getVideoCover(res.accessory)
      //   }
      //   this.$message({
      //     showClose: true,
      //     message: '上传成功！',
      //     type: 'success'
      //   })
      //   this.$emit('getValue', this.fileList)
      //   for (const i in this.beforeFileList) {
      //     if (this.beforeFileList[i].uid === file.uid) {
      //       this.beforeFileList.splice(i, 1)
      //       return false
      //     }
      //   }
    },
    beforeAvatarUpload(file) {
      // 启动内部进度条
      this.startFakeProgress(file);
      
      if (this.isOnly) {
        this.fileList = []
        this.listImgUrl = []
        this.listVideoUrl = []
        this.beforeFileList = []
      }
      if (this.acceptType == '.mp4,.avi,.mov,.wmv') {
        this.fileSize = 3 * 1024 * 1024 * 1024;
      } else {
        this.fileSize = 2 * 1024 * 1024 * 1024;
      }
      const isLt2M = file.size / 1024 / 1024 < this.fileSize
      const fileTypes = this.acceptType.split(',')
      const fileName = file.name.lastIndexOf('.')
      const fileNameLen = file.name.length
      const fileTypeName = file.name.substring(fileName, fileNameLen)
      const fileIndex = fileTypes.indexOf(fileTypeName)
      if (!isLt2M) {
        this.$message.warning(
          `系统仅允许单个附件大小在${
            this.fileSize / 1024 / 1024 / 1024
          }GB以内的文件进行上传，本次上传有文件超出限制，请重新选择！`
        )
      } else if (fileIndex === -1) {
        this.$message.warning(
          '您选择的文件格式不在系统支持的范围内，请重新选择！'
        )
      } else if (file.size === 0) {
        this.$message.warning('上传文件不能为空！')
      } else {
        this.beforeFileList.push({
          uid: file.uid,
          name: file.name,
          percentage: 0,
          size: file.size,
          isSuccess: false
        })
        this.loading = true
      }
      return isLt2M && fileIndex !== -1 && file.size !== 0
    },
    handleUploadError: function(response, file, fileList) {
      this.loading = false
      // 停止进度条并显示失败
      this.stopFakeProgress(false)
      for (const i in this.beforeFileList) {
        if (this.beforeFileList[i].uid === file.uid) {
          this.beforeFileList.splice(i, 1)
          this.$message({
            showClose: true,
            message: '文件上传失败，请您重新上传！',
            type: 'warning'
          })
          return false
        }
      }
    },
    handleUploadProgress(event, file, fileList) {
      const currentFile = this.beforeFileList.filter((f) => f.uid === file.uid)
      if (currentFile && currentFile.length > 0) {
        currentFile[0].percentage = parseInt(event.percent.toFixed(0))
      }
    },
    // 附件删除
    handleUploadRemove(item) {
      this.$confirm('确定要删除此附件吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          //   this.$http({
          //     url: ’,
          //     method: 'post',
          //     data: {
          //       id: item.id
          //     }
          //   }).then(({ data }) => {
          //     this.fileList = this.fileList.filter((i) => i.id !== item.id)
          //     this.$message({
          //       message: '删除成功！',
          //       type: 'success'
          //     })
          //     this.$emit('getValue', this.fileList)
          //   })
          this.fileList = this.fileList.filter(
            (i) => i.fileUploadName !== item.fileUploadName
          )
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
          // this.$emit('getValue', this.fileList)
        })
        .catch(() => {})
    },
    // 附件下载
    downloadAccessory(item) {
      if (item.accessoryId) {
        this.$utils.download({ url: `/sys/accessory/download/${item.accessoryId}` })
      } else {
        this.$utils.download({ url: `/sys/accessory/download/${item.id}` })
      }
    },
    // 附件图标
    // 开始模拟进度条
    startFakeProgress(file) {
      console.log("🚀 ~ file-----:", file)
      this.progressFileName = file.name || '准备上传...';
      this.progressPercentage = 0;
      this.currentUploadFile = file;

      // 显示进度条
      this.progressVisible = true;

      // 根据文件大小动态计算动画时间（基于实际测试数据）
      const fileSize = file.size || 0;

      // 基于测试数据的计算：300MB约需2分钟(120000毫秒)
      // 计算上传速度基准：300MB / 120000ms = 0.0025 MB/ms
      const baseUploadSpeed = 0.0016; // MB/ms

      // 计算文件大小（MB）
      const fileSizeMB = fileSize / (1024 * 1024);

      // 基础时间计算
      let totalTime = fileSizeMB / baseUploadSpeed;

      // 确保小文件有合理的最小时间（至少3秒）
      totalTime = Math.max(totalTime, 3000);

      // 针对中文件的微调（10-50MB）- 基于13MB约20秒的测试数据
      if (fileSizeMB > 10 && fileSizeMB <= 50) {
        // 线性调整，确保13MB文件显示约20秒
        const adjustmentFactor = 0.8;
        totalTime = totalTime * adjustmentFactor;
      }

      // 对于超大文件（>2GB），应用递减因子避免时间过长
      if (fileSizeMB > 2000) {
        // 随着文件变大，时间增长逐渐放缓
        const largeFileFactor = 0.9 + (fileSizeMB / 10000); // 最大约1.1的因子
        totalTime = totalTime * largeFileFactor;
      }

      // 添加一些随机波动，让进度看起来更自然（±5%）
      const randomFactor = 0.95 + Math.random() * 0.1;
      totalTime = totalTime * randomFactor;

      console.log(`文件大小: ${(fileSizeMB).toFixed(2)}MB, 计算动画时间: ${(totalTime/1000).toFixed(2)}秒`);

      const step = 95 / (totalTime / 100); // 每100ms增加的进度，最多到95%

      // 清除之前的定时器
      if (this.progressTimer) {
        clearInterval(this.progressTimer);
      }

      // 设置新的定时器
      this.progressTimer = setInterval(() => {
        if (this.progressPercentage < 95) {
          this.progressPercentage += step;
          if (this.progressPercentage > 95) {
            this.progressPercentage = 95;
          }
        }
      }, 100);
    },
    
    // 停止进度条
    stopFakeProgress(isSuccess) {
      // 清除定时器
      if (this.progressTimer) {
        clearInterval(this.progressTimer);
        this.progressTimer = null;
      }
      
      // 设置进度为100%
      this.progressPercentage = 100;
      
      // 延迟隐藏进度条
      setTimeout(() => {
        this.progressVisible = false;
        this.progressPercentage = 0;
        this.currentUploadFile = null;
      }, isSuccess ? 500 : 1500);
    },
    
    getAccessoryIcon(type) {
      let icon = ''
      if (type === 'code') {
        icon = require('@/assets/images/fileIcon/iconcode.png')
      } else if (type === 'html') {
        icon = require('@/assets/images/fileIcon/iconcode.png')
      } else if (type === 'word') {
        icon = require('@/assets/images/fileIcon/icondocdocx.png')
      } else if (type === 'text') {
        icon = require('@/assets/images/fileIcon/iconTXT.png')
      } else if (type === 'ppt') {
        icon = require('@/assets/images/fileIcon/iconpptpptx.png')
      } else if (type === 'pdf') {
        icon = require('@/assets/images/fileIcon/iconpdf.png')
      } else if (type === 'archive') {
        icon = require('@/assets/images/fileIcon/iconrarzip.png')
      } else if (type === 'fa-windows') {
        icon = require('@/assets/images/fileIcon/iconfa-windowswindows.png')
      } else if (type === 'video') {
        icon = require('@/assets/images/fileIcon/iconvideo.png')
      } else if (type === 'audio') {
        icon = require('@/assets/images/fileIcon/iconaudio.png')
      } else if (type === 'flash') {
        icon = require('@/assets/images/fileIcon/iconflash.png')
      } else if (type === 'image') {
        icon = require('@/assets/images/fileIcon/iconjpgpnggif.png')
      } else if (type === 'file') {
        icon = require('@/assets/images/fileIcon/iconbianzu.png')
      } else if (type === 'excel') {
        icon = require('@/assets/images/fileIcon/iconxlsxlsx.png')
      } else if (type === 'ofd') {
        icon = require('@/assets/images/fileIcon/iconofd.png')
      }
      return icon
    },
    // 视频切换上一个
    videoPrev() {
      let prevIndex
      this.listVideoUrl.forEach((item, index) => {
        if (item === this.videoUrl) {
          if (index === 0) {
            prevIndex = this.listVideoUrl.length - 1
          } else {
            prevIndex = index - 1
          }
        }
      })
      this.videoUrl = this.listVideoUrl[prevIndex]
    },
    // 视频切换下一个
    videoNext() {
      let nextIndex
      this.listVideoUrl.forEach((item, index) => {
        if (item === this.videoUrl) {
          if (index === this.listVideoUrl.length - 1) {
            nextIndex = 0
          } else {
            nextIndex = index + 1
          }
        }
      })
      this.videoUrl = this.listVideoUrl[nextIndex]
    },
    // 是否显示视频
    closeVideo() {
      this.videoFlag = false
    },
    // 视频截取第一帧作为背景图
    getVideoCover(file) {
      const _self = this
      _self.$set(file, 'videoUrl', _self.deepClone(file.url)) // 备份视频源路径，用于后续预览展示
      const video = document.createElement('video') // 也可以自己创建video
      video.src = file.url // url地址 url跟 视频流是一样的
      file.url = file.icon // 设置默认封面，videoDefCover 为预制的默认封面，不需要可去除或替换成自己的
      const canvas = document.createElement('canvas') // 获取 canvas 对象
      const ctx = canvas.getContext('2d') // 绘制2d
      video.crossOrigin = 'anonymous' // 解决跨域问题，也就是提示污染资源无法转换视频
      video.currentTime = 1 // 第一帧
      video.oncanplay = () => {
        canvas.width = video.clientWidth ? video.clientWidth : 120 // 获取视频宽度
        canvas.height = video.clientHeight ? video.clientHeight : 80 // 获取视频高度
        // 利用canvas对象方法绘图
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
        // 转换成base64形式
        const _videoFirstimgsrc = canvas.toDataURL('image/png') // 截取后的视频封面
        _self.$set(file, 'url', _videoFirstimgsrc) // 重置文件的url为当前截取的封面，用于 el-upload展示
        video.remove()
        canvas.remove()
      }
    },
    // 附件预览
    previewFile(item) {
      if (item.fileFormat === 'jpeg' || item.fileFormat === 'jpg') {
        // const list = []
        // let initIndex = 0
        // this.listImgUrl.forEach((temp, index) => {
        //   list.push(this.getFileUrl(temp))
        //   if (item.accessoryId === temp) {
        //     initIndex = index
        //   }
        // })
        // this.$viewerApi({
        //   options: {
        //     initialViewIndex: initIndex,
        //     zIndex: 9999
        //   },
        //   images: list // urlList是经过过滤后的的，里面的都是要预览的图片的地址
        // })
      } else if (item.type === 'video') {
        this.videoUrl = item.accessoryId
        this.videoFlag = true
      } else {
        if (
          item.type === 'word' ||
          item.type === 'ppt' ||
          item.type === 'text' ||
          item.type === 'pdf' ||
          item.type === 'excel' ||
          item.type === 'ofd'
        ) {
          if (item.isNow) {
            this.$message({
              showClose: true,
              message: '该类型文件尚未提交保存，暂不支持预览！',
              type: 'warning'
            })
          } else {
            this.previewName = item.name
            const ofdId =
              item.type === 'ofd' || item.ofdId ? item.ofdId : item.accessoryId
            this.previewUrl = `${
              process.env.VUE_APP_OFD_PREVIEW_URL
            }?file=${window.getFile(ofdId)}`
            this.previewFlag = true
          }
        } else {
          this.$message({
            showClose: true,
            message: '该类型文件暂不支持预览！',
            type: 'warning'
          })
        }
      }
    }
  }
}
</script>
<style lang="scss">
.upload-list-content {
    .upload-long {
        .el-upload {
            width: 100% !important;
            .el-upload-dragger {
                width: 100% !important;
                height: 40px !important;
                border-radius: 2px;
                .el-icon-upload {
                    margin: 0 !important;
                    line-height: 35px !important;
                }
            }
        }
    }
    button {
        width: auto !important;
    }
    .upload-text {
        font-size: 14px;
        .title {
            margin: 0;
            text-align: left;
        }
        ul {
            color: #ff0000;
            padding-left: 0 !important;
            margin: 5px auto;
        }
        li {
            line-height: 22px;
            word-wrap: break-word;
            list-style: none;
        }
    }
    .card-box {
        margin-top: 20px;
        h2 {
            font-size: 18px;
            font-weight: 550;
        }
        .fileItem {
            width: var(--lineWidth);
            text-align: center;
            padding: 0 5px 15px;
            position: relative;
            .item-check {
                position: absolute;
                left: 8px;
                top: 0;
                &::v-deep {
                    .el-checkbox__inner {
                        border-color: #1b69d2;
                    }
                }
            }
            .fileCard {
                display: flex;
                flex-direction: column;
                border-radius: 4px;
                border: 1px solid #ebeef5;
                background-color: #f9f9f9;
                overflow: hidden;
                transition: 0.3s;
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                padding: 10px 10px;
                &:hover {
                    opacity: 0.8;
                }
                img {
                    height: 80px;
                    min-height: 80px;
                    width: auto;
                    max-width: 100%;
                    object-fit: contain;
                    position: initial;
                    cursor: pointer;
                }
                .video {
                    position: relative;
                    i {
                        font-size: 26px;
                        color: #fff;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        margin-top: -13px;
                        margin-left: -13px;
                        cursor: pointer;
                    }
                }
                .fileInfo {
                    width: 100%;
                    line-height: normal !important;
                    margin-top: 5px;
                    span {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        line-height: 20px;
                        color: #2e2e2e;
                    }
                    .originalSize {
                        span {
                            color: #b0b0b0;
                            font-size: 12px;
                        }
                    }
                }
                .el-progress-bar__outer {
                    height: 3px !important;
                }
            }
        }
        .el-card__body {
            padding: 0 !important;
            max-width: 100%;
            width: 100%;
        }
        .handleBtns {
            position: initial;
            /*line-height: 52px;
            right: 10px;
            bottom: 0;*/
            line-height: initial;
            button {
                padding: 0;
            }
        }
        .fileCard {
            width: 100%;
            padding: 5px 46px;
            position: relative;
            margin-bottom: 10px;
            display: flex;
            border: 1px solid #d9d9d9;
            img {
                width: 25px;
                position: absolute;
                left: 10px;
                top: 12px;
            }
            .el-icon-loading {
                width: 20px;
                height: 24px;
                position: absolute;
                left: 10px;
                top: 12px;
                font-size: 24px;
            }
            .fileInfo {
                width: 100%;
                line-height: normal !important;
                span {
                    /*overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;*/
                    line-height: 20px;
                    color: #2e2e2e;
                    display: block;
                    cursor: pointer;
                }
                .originalSize {
                    span {
                        color: #b0b0b0;
                        font-size: 12px;
                        display: inline-block;
                        cursor: default;
                    }
                }
            }
            .el-progress-bar__outer {
                height: 3px !important;
            }
        }
    }
}
.video-play {
    z-index: 999999999999999;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(14, 13, 13, 0.5);
    top: 6%;
    left: 0;
    .video {
        margin-left: 15%;
    }
    .video-close {
        margin-left: 89%;
        margin-top: 2%;
        color: #fff;
        cursor: pointer;
    }
    .video-prev {
        width: 50px;
        height: 50px;
        position: absolute;
        background: #2e2e2e;
        border-radius: 50px;
        color: #fff;
        cursor: pointer;
        top: 50%;
        left: 5%;
        margin-top: -25px;
        text-align: center;
        i {
            font-size: 40px;
            margin-top: 5px;
        }
        &:hover {
            opacity: 0.8;
        }
    }
    .video-next {
        width: 50px;
        height: 50px;
        position: absolute;
        background: #2e2e2e;
        border-radius: 50px;
        color: #fff;
        cursor: pointer;
        top: 50%;
        right: 5%;
        margin-top: -25px;
        text-align: center;
        i {
            font-size: 40px;
            margin-top: 5px;
        }
        &:hover {
            opacity: 0.8;
        }
    }
}
.linear-progress-container {
    margin-top: 15px;
    padding: 15px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    background-color: #fff;
}
.linear-progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
}
.linear-progress-filename {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 10px;
}
.linear-progress-percentage {
    font-weight: bold;
    min-width: 40px;
    text-align: right;
}
.el-progress-bar__outer {
    border-radius: 3px;
}
.el-progress-bar__inner {
    border-radius: 3px;
    transition: width 0.3s ease;
}
</style>
<style lang="scss" scoped>
.fileItem {
    .item-check {
        &::v-deep {
            .el-checkbox__inner {
                border-color: #1b69d2;
            }
        }
    }
}
</style>
